<template>
  <el-row class="address">
    <el-col :span="span" v-if="showCols.includes('province')">
      <el-select
        v-model="province"
        :placeholder="provincePlaceholder"
        style="width: 100%"
        :clearable="clearable"
        @change="changeProvinceHandler"
        @clear="clearProvinceHandler"
      >
        <el-option v-for="item in provinceList" :key="item[valueKey]" :label="item[labelKey]" :value="item[valueKey]">
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="span" v-if="showCols.includes('city')">
      <el-select
        v-model="city"
        :placeholder="cityPlaceholder"
        :disabled="!province"
        style="width: 100%"
        :clearable="clearable"
        @change="changeCityHandler"
        @clear="clearCityHandler"
      >
        <el-option v-for="item in cityList" :key="item[valueKey]" :label="item[labelKey]" :value="item[valueKey]">
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="span" v-if="showCols.includes('area')">
      <el-select
        v-model="area"
        :placeholder="areaPlaceholder"
        :disabled="!city"
        style="width: 100%"
        :clearable="clearable"
        @change="changeAreaHandler"
        @clear="clearAreaHandler"
      >
        <el-option v-for="item in areaList" :key="item[valueKey]" :label="item[labelKey]" :value="item[valueKey]">
        </el-option>
      </el-select>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'FullAddressSelect',
  props: {
    span: {
      type: Number,
      default: 6,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    showCols: {
      type: Array,
      default: () => ['province', 'city', 'area'],
    },
    valueKey: {
      type: String,
      default: 'value',
    },
    labelKey: {
      type: String,
      default: 'label',
    },
    provincePlaceholder: {
      type: String,
      default: '请选择省份',
    },
    cityPlaceholder: {
      type: String,
      default: '请选择市',
    },
    areaPlaceholder: {
      type: String,
      default: '请选择区',
    },
  },
  data() {
    return {
      provinceList: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
      ],
      cityList: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
      ],
      areaList: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
      ],
      province: '',
      city: '',
      area: '',
    };
  },
  methods: {
    changeProvinceHandler(province) {
      console.log(province);
      if (province) {
        // TODO 根据省份接口查询市接口
      }
    },
    clearProvinceHandler() {
      this.province = this.city = this.area = '';
      this.cityList = this.areaList = [];
    },
    changeCityHandler(city) {
      if (city) {
        // TODO 根据市id调用后端接口
      }
    },
    clearCityHandler() {
      this.area = '';
      this.areaList = [];
    },
    changeAreaHandler(area) {},
    clearAreaHandler() {},
  },
};
</script>

<style></style>
